/**####################################################################################
  CLASS : qDojo.dijix.FileUploader
  ==================================
  - A file uploader widget
  - As seen on - http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  -   	<input id="${id}_io" class="dijixFileInputReal" type="file" dojoAttachPoint="fileInput" name="${name}" />
  - TODO:
 	- Dynamic File Icon according to file type!!
  
  ####################################################################################*/
dojo.provide("qDojo.dijix.FileUploader");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated"); 

dojo.declare("qDojo.dijix.FileUploader", [dijit._Widget , dijit._Templated] , {

		label		:	"Browse..." , 
		name		:	"uploadFile" ,
		fileType	:   "*.*" ,
		templatePath: dojo.moduleUrl("qDojo.dijix", "template/FileUploader.html"),
		error		: false ,
		required	: false ,
		empty		: true ,	
		validationError : false ,	
        postCreate: function() {        
			this.inherited(arguments);													
			dojo.connect( this.fileInput , "onchange" , this , "changed"  );			
			// this was done to compensate for fileUploader in a dijix.dialog. It seems IE and FF interprets element with z-index differently.			
			if( dojo.isFF || dojo.isSafari){
				this.fileInput.style.zIndex = "3";
				this.buttonNode.style.zIndex = "2";
			}else if( dojo.isIE ){
				this.fileInput.style.zIndex = "0";
				this.buttonNode.style.zIndex = "-1";
			}
        },
        changed: function(){
        	this.error = false;
        	var val = this.fileInput.value;
        	if( this.fileType != "*.*" ){
        		var ext = val.substring( val.indexOf(".") + 1 );
        		if( ext != this.fileType ){
        			this.indicatorNode.style.background = "#FF0000";
        			this.error = true;
        		}
        		else{        			
        			this.indicatorNode.style.background = "#4FB4EB";
        			this.empty = false;
        		}
        	}else{
        		this.indicatorNode.style.background = "#4FB4EB";
        		this.empty = false;
        	} 
        	if( dojo.isIE )
	        	val = val.substring( val.lastIndexOf("\\") + 1 );
	        	
        	if(this.error)
        		val= "Allowed type:<b>" + this.fileType + "<b>";
        		
        	this.indicatorNode.innerHTML = "&nbsp;" + val + "&nbsp;";
        	
        	var node = this.indicatorNode;
        	node.style.opacity = 0;
        	node.style.filter = "alpha(opacity:0)";
			this._fadeIn = dojo.fadeIn({
								node: node,
								duration: 1000
			});
			this._fadeIn.play();						
        },       		 
        validate: function(){	        
        	return this.required? (this.error? false : (this.empty? false : true )) : this.error? false : true  ;
        }, 
        focus:function(){
	        var node = this.indicatorNode;
	        var msg = this.required? (this.error? "Allowed type:<b>" + this.fileType + "<b>" : (this.empty? "Allowed type:<b>" + this.fileType + "<b>" : "" )) : this.error? "Allowed type:<b>" + this.fileType + "<b>" : ""  ;
	        console.log("msg= " + msg);	        
	        node.style.background = "#FF0000";
	        node.innerHTML = "&nbsp;" + msg + "&nbsp;";
	        dojo.fadeOut({	node: node,
							duration: 200 ,
							onEnd: function(){dojo.fadeIn({ node:node , delay:0 , duration:200 }).play();}
			}).play();
				
        }
});


